import React, {Component} from 'react';
import {Form, Input, Space, Table, Button} from 'antd';
import "./list.scss"
import axios from 'axios';
import '../../mock/index'
import {ListState, QueryData} from "../interface/oneFace";
import { withRouter } from 'react-router'


class TxtOne extends Component<any, ListState> {

    constructor(props:any) {
        super(props);
    }

    //布局
    layout = {
        labelCol: {span: 6},
        wrapperCol: {span: 18},
    };

    //状态
    state = {
        dataSource: [
            {
                key: '1',
                name: '胡彦斌',
                age: 32,
                email: '西湖区湖底公园1号',
            },
            {
                key: '2',
                name: '胡彦祖',
                age: 42,
                email: '西湖区湖底公园1号',
            },
        ],
        total: 0,
        query: {
            pageNo: 0,
            pageSize: 7,
            name: '',
            email: ''
        },
        columns: [
            {
                title: 'name',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: 'age',
                dataIndex: 'age',
                key: 'age',
            },
            {
                title: 'link',
                dataIndex: 'email',
                key: 'email',
            },
            {
                title: 'website',
                dataIndex: 'website',
                key: 'website',
            },
            {
                title: 'introduction',
                dataIndex: 'introduction',
                key: 'introduction',
            }
            // {
            //     title: 'Action',
            //     key: 'action',
            //     render: () => (
            //         <Space size="middle">
            //             <a>detail</a>
            //             <a>edit</a>
            //             <a>Delete</a>
            //         </Space>
            //     ),
            // },
        ]
    }

    //表单dom
    formRef = React.createRef<any>();

    //查询
    onFinish = (value: any) => {
        let obj: QueryData = JSON.parse(JSON.stringify(this.state.query));
        obj.name = value.name || '';
        obj.email = value.email || '';
        this.setState({query: obj});
        console.log(this.state.query, '||')
        this.getData();
    };

    //重置(在form双向绑定会出问题 使用antd提供的方法或者mobx可以实现双向绑定且方便)
    reset = () => {
        this.formRef.current.resetFields();
        let obj: QueryData = {
            pageNo: 0,
            pageSize: 7,
            name: '',
            email: ''
        };
        this.setState({
            query: obj
        });
        setTimeout(() => {
            this.getData();
        }, 500)
    }

    //获取表格数据
    getData = () => {
        axios.post('/table/list', this.state.query)
            .then((res) => {
                this.setState({total: res.data.total});
                this.setState({dataSource: res.data.data});
            }).catch((err) => {
            console.log(err)
        });
    }

    //分页
    tableChange = (page: any, size: any) => {
        let obj: QueryData = JSON.parse(JSON.stringify(this.state.query));
        obj.pageNo = page;
        this.setState({query: obj});
        // this.state.pageSize = size;
        this.getData();
    }

    //新增用户
    addUser = () => {
        console.log(this, this.props)
        this.props.history.push('/layout/add');
    }

    componentDidMount() {
        this.getData();
        setTimeout(() => {
            let obj = JSON.parse(JSON.stringify(this.state.dataSource));
            if(this.props.location.state) obj.push(this.props.location.state);
            this.setState({dataSource: obj})
        }, 1000)
    }

    render() {
        return (
            <div className="listLayout">
                <div className="header">
                    <Form  ref={this.formRef} name="horizontal_login" {...this.layout} layout="inline" onFinish={this.onFinish}>
                        <Form.Item
                            name="name"
                            label={"name"}
                        >
                            <Input defaultValue="" placeholder="name"/>
                        </Form.Item>
                        <Form.Item
                            name="email"
                            label="link"
                        >
                            <Input defaultValue="" placeholder="link"/>
                        </Form.Item>
                        <div className="find-btn">
                            <Button onClick={this.reset}>重置</Button>
                            <Button type="primary" htmlType="submit">查询</Button>
                        </div>
                    </Form>
                </div>
                <div className="center">
                    <div className="table-head">
                        <Button type="primary" onClick={this.addUser.bind(this)}>新增</Button>
                        <Button>批量删除</Button>
                    </div>
                    <Table
                        dataSource={this.state.dataSource}
                        pagination={
                            {
                                current: this.state.query.pageNo + 1,
                                total: this.state.total,
                                onChange: this.tableChange
                            }
                        }
                        columns={this.state.columns}/>
                </div>

            </div>
        )
    }
}
export default withRouter(TxtOne);
